<template>
  <div class="chart-comp">
    <div v-if="isArr" class="list-box">
      <div v-for="(item, index) of chartData" :key="index" class="list-item">
        <div
          :id="index.toString()"
          :is="tpl"
          :chartData="item"
          :defaultOptions="defaultOptions"
          :shrink="collapse"
        ></div>
      </div>
    </div>
    <div v-else :id="id" :is="tpl" :chartData="chartData" :defaultOptions="defaultOptions" :params="mapfvParams" :operArea="false" :shrink="collapse"></div>
  </div>
</template>
<script>
import { isArray } from 'lodash'

export default {
  name: 'ChartComp',
  components: {
    ELine: () => import('@/commons/charts/ELine'),
    HPie3d: () => import('@/commons/charts/HPie3d'),
    EHeatmap: () => import('@/commons/charts/EHeatmap'),
    HeatMap: () => import('@/commons/charts/HeatMap'),
    ERadar: () => import('@/commons/charts/ERadar'),
    HBar3d: () => import('@/commons/charts/HBar3d'),
    HFunnel3d: () => import('@/commons/charts/HFunnel3d'),
    HGauge: () => import('@/commons/charts/HGauge'),
    HBullet: () => import('@/commons/charts/HBullet'),
    EScatter: () => import('@/commons/charts/EScatter')
  },
  props: {
    type: String,
    id: String,
    chartData: {
      type: Object | Array
    },
    defaultOptions: {
      type: Object,
      default: () => ({})
    },
    collapse: {
      type: Boolean
    }
  },
  data() {
    return {
      chartTpls: {
        pie: 'HPie3d',
        bar: 'HBar3d',
        line: 'ELine',
        leida: 'ERadar',
        yibiao: 'HGauge',
        loudou: 'HFunnel3d',
        sandian: 'EScatter',
        zidan: 'HBullet',
        map: 'EHeatmap',
        mapfw: 'HeatMap'
      },
      tpl: null
    }
  },
  computed: {
    isArr() {
      return isArray(this.chartData) && this.type === 'zidan'
    },
    mapfvParams() {
      return {
        yCut: 50,
        xMinSize: 30.636509,
        level:
          '[{"min":0,"max":8,"level":0,"color":"#2B0FF6","pointMultiple":4},{"min":8,"max":15,"level":1,"color":"#CC3737","pointMultiple":4}]',
        xMaxSize: 30.683727,
        name: 'admin',
        hotLevel: '{"min":2,"max":8}',
        yMinSize: 104.050095,
        yMaxSize: 104.13317,
        id: 1,
        xCut: 50
      }
    }
  },
  mounted() {
    if (this.type) {
      this.tpl = this.chartTpls[this.type]
    }
  }
}
</script>
<style lang="less" scoped>
.chart-comp {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .list-box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }

  .list-item {
    height: 100px;
  }
}
</style>
